<template>
    <view class="point-title">
        <view class="first-point outer"
              :style="'background-image: linear-gradient(135deg, ' + colorStart + ' 0%, ' + colorEnd + ' 100%);'">
            <view class="inner" :style="'background-color: ' + innerColor + ';'"></view>
        </view>

        <view class="title">{{ title }}</view>

        <view class="last-point outer"
              :style="'background-image: linear-gradient(135deg, ' + colorStart + ' 0%, ' + colorEnd + ' 100%);'">
            <view class="inner" :style="'background-color: ' + innerColor + ';'"></view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            default: '猜你喜欢'
        },
        outerColor: {
            type: String,
            default: '#27BA9B'
        },
        innerColor: {
            type: String,
            default: '#F7F7F7'
        }
    },
    data() {
        return {}
    },
    methods: {
        hexToRgb(hex) {
            hex = hex.replace('#', '')

            if (hex.substr(0, 3).toUpperCase() === 'RGB') return hex.toUpperCase()

            const R = parseInt(hex.substring(0, 2), 16)
            const G = parseInt(hex.substring(2, 4), 16)
            const B = parseInt(hex.substring(4, 6), 16)

            return 'RGB(' + R + ', ' + G + ', ' + B + ')'
        }
    },
    computed: {
        colorStart() {
            const color = this.hexToRgb(this.outerColor)
            const arr = color.split(')')
            return (arr[0] + ', 0)').replace('rgb', 'rgba')
        },
        colorEnd() {
            const color = this.hexToRgb(this.outerColor)
            const arr = color.split(')')
            return (arr[0] + ', 1)').replace('rgb', 'rgba')
        }
    }
}
</script>

<style scoped lang="scss">
.point-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0 15rpx;

    .outer {
        width: 20rpx;
        height: 20rpx;
        border-radius: 10rpx;
        position: relative;

        .inner {
            width: 12rpx;
            height: 12rpx;
            border-radius: 6rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }

    .title {
        font-size: 32rpx;
        color: #333333;
        margin: 0 15rpx;
    }
}
</style>
